import styled from 'styled-components';
import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
import {
    ProForm,
    ProFormText,
    ProFormTextArea,
    ProFormSwitch,
    ProFormItem
} from '@ant-design/pro-components';
import { Tabs, Button } from 'antd';
import type { TabsProps } from 'antd';


import { DomainEditor } from './domain-editor';
import { QiniuFileUpload, ConnectorDataSourceForm } from '../../../components';
import { getNowFormatDate, uuid } from '../../../utils';
import { MetaDataDomain, metaDataExtractorFromDataSource, metaDataSaveDomain, metaDataUpdateDomain } from '../../../services';

export interface DomainImporterProps {
    style?: CSSProperties;
    onFinish: () => Promise<void> | void;
}

export const DomainImporter: React.FC<DomainImporterProps> = (props) => {

    const [loading, setLoading] = useState<boolean>(false);

    const [icon, setIcon] = useState<Array<string>>([]);

    const items: TabsProps['items'] = [
        {
            key: '1',
            label: '新建',
            children: <DomainEditor onFinish={async () => {
                props.onFinish && await props.onFinish();
            }} />,
        },
        {
            key: '2',
            label: '数据库识别导入',
            children: <ConnectorDataSourceForm
                submitTitle={'导入'}
                extention={<>
                    <ProFormSwitch
                        width="xl" fieldProps={{}}
                        name="mutilDomain"
                        label="每个数据库创建一个域" />

                </>}
                onFinish={async (datasource, options) => {
                    console.log(datasource, options);
                    //
                    setLoading(true);
                    try {
                        let res = await metaDataExtractorFromDataSource(datasource as any);
                    } catch (error) {
                        console.error(error);
                    }
                    props.onFinish && await props.onFinish();
                    setLoading(false);
                }}
            ></ConnectorDataSourceForm>,
        },
        {
            key: '3',
            label: '代码识别导入',
            children: '敬请期待~',
        },
    ];

    return (
        <Container>
            <Tabs defaultActiveKey="1" items={items} onChange={(key: string) => {
                console.log(key);
            }} />
        </Container>
    );
}


const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;